import React, { memo } from 'react'
import { useNavigate } from 'react-router-dom';

import arrowMoreImg from "@/assets/images/hospital/arrow.png" 
import drugTipImg from "@/assets/images/hospital/drug_tip.png"
import { useDispatch } from 'react-redux';


function DrugMsg(props) {
    const navigate = useNavigate();

    const dispatch = useDispatch();


    //点击查看健康档案
    const clickLookMoreBtn = () => {
        dispatch({
            type: "msgDetailAction",
            payload: props.illTakings
        })
        navigate("/msg")
    }

    return (
        <>
            {
                props.illTakings && props.illTakings.length !== 0 && (
                    <div className='hosMsgBox'>
                        {/* 头部更多按钮 */}
                        <div className='hosMsgHead'>
                            <div className='hosMsgHeadTit'>消息</div>
                            <div className='hosMsgHeadMore' onClick={clickLookMoreBtn}>
                                <span>更多</span>
                                <img alt='' src={arrowMoreImg} className='hosMsgHeadIcon' />
                            </div>
                        </div>

                        <div className='hosMsgLineBox'>
                            <div className='hosMsgLine'></div>
                        </div>

                        {/* 消息列表 */}
                        <div className='hosMsgUl'>
                            {/* 要渲染的列表 */}
                            {
                                props.illTakings.filter((item, index) => index < 2).map((item, index) => (
                                    <div className='hosMsgLi' key={index}>
                                        <div className='hosMsgLiLeft'>
                                            <img alt='' src={drugTipImg} className='hosMsgLiIcon' />
                                        </div>
                                        <div className='hosMsgLiRight'>
                                            <div className='hosMsgLiTop'>用药提醒</div>
                                            <div className='hosMsgLiBom'>您的用药时间到了，请及时服用{item.drugs}</div>
                                        </div>
                                    </div>
                                ))
                            }
                            
                        </div>
                    </div>
                )
            }
        </>
    )
}

export default memo(DrugMsg);
